@charset "utf-8";

@import "./reset.scss";

@function getvw($w){
    @return ($w / 750) * 100 + vw
}

.wrap{
    width: getvw(750);
    .header{
        width: getvw(750);
        ul{
            display: flex;
            margin: getvw(48) getvw(23);
            justify-content: space-between;
            align-items: center;
            li {
                font-size: getvw(25);
                margin-bottom: getvw(3);
                img{
                    width: getvw(62);
                    height: getvw(43);
                }
            }
            li:first-child{
                width: getvw(123);
                height: getvw(57);
                border-radius: getvw(20);
                border: 1px solid orange;
                text-align: center;
                line-height: getvw(57);
                font-size: getvw(21);
            }
        }
    }
    .message{
        width: getvw(705);
        margin: getvw(0) auto;
        margin-bottom: getvw(26);
        display: flex;
        justify-content: space-between;
        align-items: center;
        img{
            width: getvw(170);
            height: getvw(170);
            border-radius: 50%;
        }
        .text{
            width: getvw(450);
            text-align: left;
            p{
                margin: getvw(20) 0;
                font-size: getvw(29);
            }
            p:last-child{
                font-size: getvw(26);
                color: gray;
            }
        }
        p{
            font-size: getvw(46);
        }
    }
    .account{
        width: getvw(705);
        margin: 0px auto;
        margin-bottom: getvw(32);
        ul{
            display: flex;
            justify-content: space-between;
            li{
                width: getvw(195);
                height: getvw(151);
                text-align: center;
                font-size: getvw(26);
                img{
                    margin-top: getvw(20);
                    margin-bottom: getvw(11);
                }
            }
            li:first-child{
                background-color: #b2e0a0;
                img{
                    width: getvw(79);
                    height: getvw(82);
                }
            }
            li:nth-child(2){
                background-color: #a0dce0;
                img{
                    width: getvw(84);
                    height: getvw(80);
                }
            }
            li:last-child{
                background-color: #e0b7a0;
                img{
                    width: getvw(124);
                    height: getvw(81);
                }
            }
        }
    }
    .pocket{
        width: getvw(705);
        margin: 0px auto;
        margin-bottom: getvw(23);
        position: relative;
        img{
            width: getvw(57);
            height: getvw(74);
        }
        .arrow{
            font-size: getvw(25);
            color: orange;
            position: absolute;
            right: getvw(0);
            top: getvw(27);
        }
        .text{
            width: getvw(578);
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            position: absolute;
            top: getvw(23);
            left: getvw(95);
            p:first-child{
                font-size: getvw(26);
            }
            p:last-child{
                font-size: getvw(24);
            }
        }
    }
    .evaluate{
        width: getvw(705);
        margin: 0px auto;
        margin-bottom: getvw(33);
        position: relative;
        img{
            width: getvw(71);
            height: getvw(74);
        }
        .arrow{
            font-size: getvw(25);
            color: orange;
            position: absolute;
            right: getvw(0);
            top: getvw(27);
        }
        .text{
            width: getvw(578);
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            position: absolute;
            top: getvw(23);
            left: getvw(95);
            p:first-child{
                font-size: getvw(26);
            }
            p:last-child{
                font-size: getvw(24);
            }
        }
    }
    .friend{
        width: getvw(705);
        margin: 0px auto;
        margin-bottom: getvw(42);
        position: relative;
        img{
            width: getvw(94);
            height: getvw(58);
        }
        .arrow{
            font-size: getvw(25);
            color: orange;
            position: absolute;
            right: getvw(0);
            top: getvw(27);
        }
        .text{
            width: getvw(578);
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            position: absolute;
            top: getvw(23);
            left: getvw(95);
            p:first-child{
                font-size: getvw(26);
            }
            p:last-child{
                font-size: getvw(24);
            }
        }
    }
    .foot{
        width: getvw(705);
        margin: 0px auto;
        margin-bottom: getvw(79);
        position: relative;
        img{
            width: getvw(59);
            height: getvw(59);
        }
        .arrow{
            font-size: getvw(25);
            color: orange;
            position: absolute;
            right: getvw(0);
            top: getvw(27);
        }
        .text{
            width: getvw(578);
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            position: absolute;
            top: getvw(23);
            left: getvw(95);
            p:first-child{
                font-size: getvw(26);
            }
            p:last-child{
                font-size: getvw(24);
            }
        }
    }
    .setting{
        width: getvw(705);
        margin: 0px auto;
        margin-bottom: getvw(24);
        position: relative;
        img{
            width: getvw(78);
            height: getvw(79);
        }
        .arrow{
            font-size: getvw(25);
            color: orange;
            position: absolute;
            right: getvw(0);
            top: getvw(27);
        }
        .text{
            width: getvw(578);
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            position: absolute;
            top: getvw(23);
            left: getvw(95);
            p:first-child{
                font-size: getvw(26);
            }
            p:last-child{
                font-size: getvw(24);
            }
        }
    }
    .contact{
        width: getvw(705);
        margin: 0px auto;
        margin-bottom: getvw(30);
        position: relative;
        img{
            width: getvw(84);
            height: getvw(59);
        }
        .arrow{
            font-size: getvw(25);
            color: orange;
            position: absolute;
            right: getvw(0);
            top: getvw(27);
        }
        .text{
            width: getvw(578);
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            position: absolute;
            top: getvw(23);
            left: getvw(95);
            p:first-child{
                font-size: getvw(26);
            }
            p:last-child{
                font-size: getvw(24);
            }
        }
    }
    .exit{
        width: getvw(538);
        margin: 0px auto;
        margin-bottom: getvw(140);
        ul{
            display: flex;
            justify-content: space-between;
            li{
                width: getvw(147);
                height: getvw(76);
                background-color: orange;
                color: white;
                text-align: center;
                line-height: getvw(76);
                border-radius: getvw(35);
                font-size: getvw(23);
            }
        }
    }
    .bottom{
        width: getvw(750);
        position: fixed;
        bottom: 0px;
        background-color: white;
        ul{
            display: flex;
            justify-content: space-around;
            li{
                text-align: center;
                a{
                    color: black;
                    text-decoration: none;
                }
                i{
                    font-size: getvw(73);
                    color: orange;
                }
                p{
                    font-size: getvw(26);
                }
            }
        }
    }
}